<template lang="pug">
	.card-manage-wrap
		.card-container
			.card-type
				.card-icon
					img(:src="dianzi")
				.card-title 电子健康卡
				.card-state 已锁定
				.card-action(@click="unbindCard") 解绑
			.card-number A878698371
		.card-container
			.card-type
				.card-icon
					img(:src="jiankang")
				.card-title 健康卡
				.card-state 已锁定
				.card-action(@click="unbindCard") 解绑
			.card-number A878698371
		.card-container
			.card-type
				.card-icon
					img(:src="shebao")
				.card-title 社保卡
				.card-state 已锁定
				.card-action(@click="unbindCard") 解绑
			.card-number A878698371
		.card-add(@click="addCard") + 添加就诊卡


</template>

<script>
import dianzi from '@/assets/image/healthCard/qricon.png'
import jiankang from '@/assets/image/healthCard/healthIcon.png'
import shebao from '@/assets/image/healthCard/securityIcon.png'
export default {
	name: 'cardManage',
	data() {
		return {
			dianzi: dianzi,
			jiankang: jiankang,
			shebao: shebao,
			cardList: []
		}
	},
	created() {},
	mounted() {},
	methods: {
		unbindCard() {
			this.showModal({
				title: '解绑',
				content: '解绑之后将无法使用医保，且不能查看之前的记录，是否确定解绑',
				confirmText: '解绑',
				success: () => {}
			})
		},
		addCard() {}
	}
}
</script>

<style lang="stylus">
	.card-manage-wrap
		padding 42px mainPadding
		.card-container
			background-color white
			padding 34px 40px 46px 36px
			box-sizing border-box
			margin-bottom mainMargin
			.card-type
				display flex
				align-items center
				font-size 22px
				position relative
				.card-icon
					padding 16px
					img
						width 48px
						height 48px
				.card-title
					font-size 32px
					color #333
					margin-right 12px
					line-height 44px
				.card-state
					color #FDAF3D
					line-height 32px
					border 2px solid rgba(253,175,61,1)
					padding 0 10px
					border-radius 6px
					height 32px
				.card-action
					position absolute
					right -40px
					top 50%
					color #aaa
					padding 40px
					transform translate3d(0,-50%,0)
					line-height 32px
			.card-number
				color grayFontColor88
				font-size 28px
				line-height 40px
				padding-left 80px
			&:last-child
				margin-bottom 0
		.card-add
			position fixed
			bottom 0
			left 0
			right 0
			height 97px
			line-height 97px
			text-align center
			color themeColor
			background-color white
			font-size 30px
</style>
